<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var flag = 1;
        $(function () {
            var strategyCommentId = getParams().id;
            var childCommentId = "";
            var reUserId;
            //console.log(strategyCommentId);
            if (strategyCommentId) {
                //回显主评论
                $.get(baseUrl + "/strategies/" + strategyCommentId + "/comment", function (data) {
                    console.log(data);
                    reUserId = data.user.id;
                    $(".comment").renderValues(data, {
                        getStarNum: function (item, value) {
                            var star = '';
                            for (var i = 0; i < value; i++) {
                                star += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5 - value; i++) {
                                star += '<i class="fa fa-star-o"></i>';
                            }
                            $(item).html(star);
                        },
                        getHref: getHref
                    });
                    for (const listdata of data.childCommentList) {
                        if (listdata.id) {
                            childCommentId = listdata.id;
                            //回显副评论
                            $.get(baseUrl + "/strategies/" + childCommentId + "/childComments", function (data) {
                                console.log(data);
                                $(".childComments").renderValues({list: data});
                            })
                        }
                    };

                    //0:没有关注;1:关注
                    var focu;//判断是否关注状态
                    //判断登录用户是否关注了作者用户
                    $.get(baseUrl+"/users/"+user.id+"/"+reUserId,function(data){
                        focu=data;
                        if (focu == 1) {
//                            $("#followBtn").html('<i class="fa fa-hand-o-right"></i> 取消关注');
                            $("#followBtn").html('取消关注');
                        }else if (focu == 0){
                            $("#followBtn").html('<i class="fa fa-hand-o-right"></i> 关注');
                        }
                    });
                    //关注点击变化,传输数据改变数据
                    $("#followBtn").click(function(){
                        if (focu == 1) {
                            focu = 0;
                            $(this).html('<i class="fa fa-hand-o-right"></i> 关注');
                            //取消关注
                            $.ajax({
                                url:baseUrl+"/users/unFuns/"+user.id+"/"+reUserId,
                                type:"delete"
                            });
                        }else if (focu == 0){
                            focu = 1;
                            $(this).html('取消关注');
                            //添加关注
                            $.ajax({
                                url:baseUrl+"/users/funs/"+user.id+"/"+reUserId,
                                type:"post"
                            });
                        }
                    });
                });
            }

            //评论绑定点击事件,跳转至弹出框
            $(".btn-input").click(function () {
                //console.log(1);
                $("#commentModal").modal("show");
            });

            //发送保存评论信息
            $(".btn-save").click(function () {
                if (flag == 2) {
                    childCommentId = $("#SingleComment").html();
                    $("#editForm").ajaxSubmit({
                        url: baseUrl + "/strategies/" + childCommentId + "/childComment",
                        type: "post",
                        success: function (data) {
                            //commentNum++;
                            location.href = "/strategyComment.html?id=" + strategyCommentId;
                        }
                    });
                } else {
                    $("#editForm").ajaxSubmit({
                        url: baseUrl + "/strategies/" + strategyCommentId + "/comment",
                        type: "post",
                        success: function (data) {
                            location.href = "/strategyComment.html?id=" + strategyCommentId;
                        }
                    });
                }
                flag = 1;
            })


        })

        function ds() {
            //回复信息
            // 回复点击事件
            flag = 2;
            $("#commentModal").modal("show");

        }


    </script>

</head>

<body style="background: url('/upload/2.bmp')">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/index.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-url="userProfiles.html?id=" render-fun="getHref" render-key="user.id">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"></i> 关注</button>
            </div>
            <div class="col">
                <span class="comment-star" render-fun="getStarNum" render-key="starNum">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                </span>

                <span class="comment-date" render-html="createTime">2018-07-11</span>
                <div class="comment-content" render-html="content">
                    <p></p>
                </div>
                <ul class="comment-img" render-loop="imgsUrls">
                    <li>
                        <img render-src="imgsUrls.self">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-url="strategyCatalogs.html?id=" render-fun="getHref" render-key="strategy.id">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title">广州攻略</span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2 commentNum">评论区<span></span></div>
    </div>

    <div>
        <div id="comments">
            <div render-loop="childCommentList">
                <div>
                    <a render-html="childCommentList.id" id="SingleComment" display="none" hidden></a>
                    <a data-href="/mine/profiles.html" render-attr="data-id=self.id" class="dynamic-detail">
                        <span><img render-src="childCommentList.user.headImgUrl" width="20px"></span>
                        <span render-html="childCommentList.user.nickName"></span>
                    <span>
                <span render-html="childCommentList.createTime"></span>
                </span>
                    </a>
                    <a href="#">
                        <span class="reply btn-input" onclick="ds()" style="color: #005cbf">回复</span>
                    </a>
                    <p></p>
                    <p render-html="childCommentList.content"></p>
                </div>
            </div>
            <div class="childComments">
                <div render-loop="list">
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span render-html="list.user.nickName" style="color: #005cbf"></span>
                        <span>回复</span>
                        <span render-html="childCommentList.user.nickName">喵喵</span>:
                        &nbsp;&nbsp;&nbsp;&nbsp;<span render-html="list.content"></span>
                    </div>
                </div>
            </div>
        </div>
        <hr>

        <div class="operation">
            <div class="d-flex justify-content-between">
                <div class="p-2"><i class="fa fa-commenting-o btn-input" id="addComment"></i> 添加你的评论</div>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title" id="myModalLabel" style="margin-left:10px">
                            评论
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="" method="post" id="editForm">
                            <input type="hidden" name="childId">
                            <div class="form-group">
                                <!--  <label class="col-sm-4 control-label">分类名称：</label>-->
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" name="content">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-save">发送</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


</body>

</html>